<template>
  <div>
    <div>
      <el-row type="flex" class="row-bg" justify="center">
        <el-col :span="10">
          <el-tag>上传图片至oss云存储</el-tag>
        </el-col>
      </el-row>
      <el-row type="flex" class="row-bg" justify="center">
        <el-col :span="10">
          <el-upload
            :show-file-list="false"
            :on-success="handleSuccess"
            :before-upload="beforeUpload"
            :on-error="handleError"
            class="uploader"
            action="http://39.108.236.154:8120/admin/oss/file/upload?module=blog"
          >
            <img v-if="Info.imageUrl" :src="Info.imageUrl" />
            <span v-else class="el-icon-plus avatar-uploader-icon"></span>
          </el-upload>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-row type="flex" class="row-bg" justify="center">
        <el-col :span="10">
          <el-tag>删除oss云存储相应图片</el-tag>
        </el-col>
      </el-row>
      <el-row type="flex" class="row-bg" justify="center">
        <el-col :span="7">
          <el-input v-model="keyword" placeholder="请输入要删除的图片链接"></el-input>
        </el-col>
        <el-col :span="3">
          <el-button type="danger" icon="el-icon-delete" @click="remove()">删除</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Info: {},
      keyword: ''
    }
  },
  methods: {
    remove() {
      return this.$axios
        .post('http://39.108.236.154:8120/admin/oss/file/remove', {
          url: this.keyword
        })
        .then(response => {
          this.$message.success(response.data.message)
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    handleSuccess(res, file) {
      if (res.success) {
        this.$alert(`${res.data.url}`, '结果', {
          confirmButtonText: '一键复制',
          callback: action => {
            this.copy(res.data.url)
          }
        })
        this.Info.imageUrl = res.data.url
        this.$forceUpdate()
      } else {
        this.$message.error('上传失败')
      }
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 5MB!')
      }
      return isJPG && isLt2M
    },
    handleError() {
      this.$message.error('上传失败')
    },
    copy(text) {
      let oInput = document.createElement('input')
      oInput.value = text
      document.body.appendChild(oInput)
      oInput.select()
      document.execCommand('Copy')
      this.$message({
        type: 'success',
        message: '复制成功!'
      })
      oInput.remove()
    }
  }
}
</script>

<style>
.el-row {
  margin-bottom: 10px;
}

.el-col {
  margin-right: 4px;
}

.uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.uploader .el-upload:hover {
  border-color: #409eff;
}

.uploader .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 640px;
  height: 357px;
  line-height: 357px;
  text-align: center;
}

.uploader img {
  width: 640px;
  height: 357px;
  display: block;
}
</style>